<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ asset('css/weui.min.css') }}">
    <style>
        body {
            background-color: #ececec;
        }
        [v-cloak] {
            display: none;
        }
        .logo {
            height: 150px;
        }
        .slogen {
            height: 150px;
            text-align: center;
            line-height: 150px;
            font-size: 30px;
            font-weight: 200;
        }
        .weui-cell {
            background-color: #fff;
        }
        .login-button {
            display: block;
            width: 94%;
            height: 50px;
            margin: 20px auto 0 auto;
            font-size: 18px;
            border-radius: 5px;
            background-color: #4d90fe;
            color: #fff;
            border: none;
            outline: none;
        }
        .reset-password {
            margin-top: 20px;
        }
        .reset-password-text {
            float: right;
            margin-right: 20px;
            color: #828282;
            font-size: 14px;
        }
        .register-form {
            width: 100%;
            position: absolute;
            bottom: 40px;
        }

        .register-button {
            display: block;
            width: 80px;
            height: 40px;
            margin: 0 auto;
            font-size: 16px;
            border-radius: 2px;
            background-color: #ececec;
            color: #4d90fe;
            border-color: #4d90fe;
        }


    </style>
    <title>爱尚课</title>

<body>
<div id="app" v-cloak>
    {{--大标题--}}
    <section class="logo">
        <div class="slogen">@{{ title }}</div>
    </section>

    {{--登录框--}}
    <section class="login-form">
        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">账号</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" v-model="phone" type="number" placeholder="手机号">
            </div>
        </div>

        <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">密码</label></div>
            <div class="weui-cell__bd">
                <input class="weui-input" v-model="password" type="password" placeholder="密码">
            </div>
        </div>

        <button class="login-button" @click="login">登录</button>

        <div class="reset-password">
            <span class="reset-password-text">忘记密码？</span>
        </div>
    </section>

    {{--注册--}}
    <section class="register-form">
        <button class="register-button" @click="register">注册</button>
    </section>
</div>
<script src="{{ asset('js/vue.dev.js') }}"></script>
<script src="{{ asset('js/axios.dev.js') }}"></script>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            title: '爱尚课',
            phone: '',
            password: '',
        },
        methods: {
            login() {
                let that = this
                //console.log(this.phone)
                axios({
                    method: 'post',
                    url: '/login',
                    timeout: 2000,
                    data: {
                        phone: that.phone,
                        password: that.password
                    }
                })
                .then(function (response) {
                    if (response.data.code === 200) {
                        window.location.href = '/student'
                    }

                })
                .catch(function (response) {
                    console.log(response)
                })
            },
            register() {
                window.location.href = '/register'
            }
        }

    })
</script>
</body>
</html>
